<template>
<div class="bin">
  <el-scrollbar height="100%" v-if="info.length!==0">
    <transition appear name="showBtn">
      <div class="clear_contain">
        <el-button class="clearBtn" type="danger">清空回收站</el-button>
      </div>
    </transition>
    <el-timeline>
      <transition-group name="list-anime" appear>
        <el-timeline-item v-for="(item,index) in info" center  placement="top" color="#3498DB" size="large" ref="timeItem"
                          :key="item.id" class="timeItem">
          <el-card class="msg hvr-grow">
            <template #header>
              <div class="card-header">
                <span>消息:{{item.id}}</span>
                <span style="font-size: 20px;letter-spacing: 0.10em">{{item.date}}</span>
                <div>
                  <!--                <el-tooltip effect="dark" content="标记为已读" placement="left-start">
                                    <el-button type="primary" circle icon="fa fa-check" class="hvr-push"></el-button>
                                  </el-tooltip>-->
                  <el-tooltip effect="dark" content="还原" placement="left-start">
                    <el-button type="success" circle icon="fa fa-arrow-left fa-lg" class="hvr-push" @click="setRead(item,index)"></el-button>
                  </el-tooltip>
                </div>
              </div>
            </template>
            <div class="card-content">
              {{item.description}}
            </div>
          </el-card>
        </el-timeline-item>
      </transition-group>
    </el-timeline>
  </el-scrollbar>
  <div v-if="info.length === 0">
    <el-empty :image-size="450" description="暂无数据"></el-empty>
  </div>
</div>
</template>

<script>
import {getDelete, setReadInfo} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  mounted() {
    getDelete({},{
      "satoken": localStorage.getItem("satoken")
    }).then(res=>{
      if (res.ret === 0){
        ElMessage.success({
          type: 'success',
          message: res.msg
        })
      }else{
        ElMessage.warning({
          type: 'warning',
          message: res.msg
        })
      }
      this.info = res.data
    }).catch(err=>{
      console.log(err)
      ElMessage.error({
        type: 'error',
        message: err
      })
    })
  },
  data(){
    return{
      info:[]
    }
  },
  methods:{
    setRead(item,index){
      if(item!==null||true){
        item.date = this.$moment(item.date)
        setReadInfo({
          ...item
        },{
          "satoken": localStorage.getItem("satoken")
        }).then(res=>{
          if (res.ret === 0){
            ElMessage.success({
              type: 'success',
              message: res.msg
            })
          }else{
            ElMessage.warning({
              type: 'warning',
              message: res.msg
            })
          }
        }).catch(err=>{
          console.log(err)
          ElMessage.error({
            type: 'error',
            message: err
          })
        })
        this.info.splice(index,1)
      }else{
        ElMessage.warning({
          type: 'warning',
          message: '信息不存在'
        })
      }
    },
  },
}
</script>

<style scoped>
.showBtn-enter-active{
  animation: rollIn 1s;
}
.showBtn-leave-active{
  animation: rollOut 1s;
}
.timeItem{
  padding-left: 80px;
  transition: all 0.7s ease;
}

.list-anime-move{
  transition: transform 1s;
}
/*.list-anime-enter-from,.list-anime-leave-to{
  transform: translateY(50px);
}*/
.list-anime-enter-active{
  animation: zoomIn 1s;
}
.list-anime-leave-active{
  position: absolute;
  animation: fadeOutRight 1s;
}

.card-content{
  font-size: 20px;
  letter-spacing: 0.15em;
}
.card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msg{
  width: 800px;
  height: auto;
}
.bin{
  position: relative;
  height: 100%;
}
.clear_contain{
  position: absolute;
  left: 45px;
  top: 40%;
  z-index: 1;
  width: auto;
  height: auto;
}

.clearBtn{
  width: 50px;
  height: fit-content;
  font-size: 18px;
  letter-spacing: 0.5em;
}
::v-deep(.clearBtn) span{
  writing-mode: vertical-lr;
  position: relative;
  right: 5px;
}
</style>